<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<title>瀑布流</title>
		<style type="text/css">
			.wrap{
				width: 800px;
				overflow: hidden;
				border:1px solid navy;
				margin: 0 auto;
			}
			.wrap ul{
				width: 180px;
				float: left;
				padding: 10px;
			}
			.wrap ul li{
				background-color: lightcyan;
				font-size: 3em;
				/*height: 100px;*/
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul></ul>
			<ul></ul>
			<ul></ul>
			<ul></ul>
		</div>
	</body>
	<script type="text/javascript">
		
//		自运行函数
//		(function(){
//			var uls = document.getElementsByTagName("ul");
//		})();
		
		var uls = document.getElementsByTagName("ul");
//		求取随机数
		function fnRand(min,max){
			return parseInt(Math.random() * (max-min) + min);
		}

		for (var i = 0; i < 20; i ++) {
			var liEl = document.createElement("li");
			liEl.innerHTML = i + 1;
			liEl.style.height = fnRand(100,300) + 'px';
			
			var ulHArrs = new Array();
			
//			获取四个ul的高度,之后进行对比
			for( var j = 0 ; j < uls.length; j ++){
				var h = uls[j].offsetHeight;
				ulHArrs.push(h);
			}
				
			var minHeight = ulHArrs[0];
			var minIndex = 0;
			
			for(var j = 1; j < ulHArrs.length; j++){
				if (minHeight > ulHArrs[j]) {
					minHeight = ulHArrs[j];
					minIndex = j;
				}
				uls[minIndex].appendChild(liEl);
				}
			}
	</script>
</html>
